<template>
  <div>
    <div class="infoBox">
      <div class="logo"><img src="@/assets/common/img.jpeg" alt=""></div>
      <div class="info">
        <p>
          <span class="name">{{ moneyform.username }}</span>
        </p>
        <p>
          <span>部门：</span>
          {{ moneyform.departmentName }}
        </p><p>
          <span>入职时间：</span>
          {{ moneyform.timeOfEntry | formatDate }}
        </p>
      </div>
    </div>
    <el-divider />
    <!-- 表单2 -->
    <el-form ref="aslaysList" :model="aslaysList">
      <el-form-item label="调整基本工资" label-width="100px">
        <el-input v-model="aslaysList.currentBasicSalary" style="width: 220px" disabled /><i class="el-icon-right" style="margin:0 20px" />
        <el-input v-model="formlist.currentBasicSalary" style="width: 220px" />
      </el-form-item>
      <el-form-item label="调整岗位工资" label-width="100px">
        <el-input v-model="aslaysList.currentPostWage" style="width: 220px" disabled /><i class="el-icon-right" style="margin:0 20px" />
        <el-input v-model="formlist.currentPostWage" style="width: 220px" />
      </el-form-item>
      <el-form-item label="工资合计" label-width="100px">
        <el-input :value="wages" style="width: 220px" disabled /><i class="el-icon-right" style="margin:0 20px" />
        <el-input style="width: 220px" :value="logerarr" disabled />
      </el-form-item>
      <el-form-item label="调整幅度" label-width="100px">
        <el-input :value="rangejian" style="width: 220px" disabled />
      </el-form-item>

      <el-form-item>
        <div class="dialog-footer">
          <el-button type="primary" @click="determine">保 存</el-button>
          <el-button @click="writeoff">关 闭</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
import { getUserDetailById } from '@/api/employees'
import { getsalarysmodifypost } from '@/api/salarys'
export default {
  props: {
    showData: {
      type: Boolean,
      require: true,
      default: false

    },
    aslaysList: {
      type: [String, Object, Array],
      require: true,
      default: null
    },
    userId: {
      type: String,
      require: true,
      default: null
    }
  },
  data() {
    return {
      moneyform: {},
      formlist: {

      }
    }
  },
  computed: {
    wages() {
      let base = 0
      if (this.aslaysList.currentPostWage != null) {
        base = Number(this.aslaysList.currentPostWage)
      }
      let post = 0
      if (this.aslaysList.currentBasicSalary != null) {
        post = Number(this.aslaysList.currentBasicSalary)
      }
      return base + post
    },
    rangejian() {
      return this.wages - this.logerarr
    },
    logerarr() {
      const res = 0
      return (Number(this.formlist.currentBasicSalary) || res) + (Number(this.formlist.currentPostWage) || res)
    }

  },
  created() {
    this.theechodata()
  },
  methods: {
    // 数据回显
    async theechodata() {
      this.moneyform = {}
      const res = await getUserDetailById(this.userId)
      this.moneyform = res
    },
    // 弹框取消
    writeoff() {
      this.moneyform = {}
      this.formlist = {}
      this.$refs.aslaysList.resetFields()
      this.$emit('update:showData', false)
    },
    // 弹框确定
    async determine() {
      const data = this.formlist
      data.userId = this.userId
      await getsalarysmodifypost(data)
      this.$emit('success')
      this.$message.success('修改成功')
      this.formlist = {}
      this.$emit('update:showData', false)
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: contain;
}
.infoBox{
      display: flex;
      border-bottom: solid 1px #ccc;
      margin-bottom: 20px;
      padding: 10px 0 20px 0;
      img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
      .logo{
        border:solid 1px #ccc;
        width: 102px;
        height: 102px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .info{
        p{
          line-height: 30px;
          .name{font-size: 16px;}
          span{
            font-weight: bold;
            display: inline-block;
            margin-right: 0px;
            margin-left: 10px;
          }
        }
      }
      .buttones{
        text-align: center;
      }
    }
</style>
